<template>
  <div id="app">
    <van-icon @click="goBack()" name="arrow-left" style="float: left"/>
    <div><p><b>{{ passenger.fareName }}</b></p></div>
      <div>
        <van-list >
          <van-cell v-for="item in messageList" :key="item.id" >
            <div v-if="item.fromUserId.includes('passenger')" style="float: left;">
              <div class="driver-Img">
                <van-image round width="100px" height="100px" :src="item.fromUserPicture" style="float: left"/>
              </div>
              <div style="float: left;margin-bottom: 50px">
                {{ item.message }}
              </div>
            </div>
            <div v-if="item.fromUserId.includes('driver')" style="float: right;">
              <div class="driver-Img">
                <van-image round width="100px" height="100px" :src="item.fromUserPicture"/>
              </div>
              <div style="float: left;margin-bottom: 50px">
                {{ item.message}}
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    <div class="bottom-bar">
      <van-field v-model="message" placeholder="请输入内容" label="消息" style="float: left;width: 370px"/>
      <van-button type="primary" @click="sendMessage" style="float: right;">发送</van-button>
    </div>
  </div>
</template>

<script>
  import {findPassenger, findSelectDriver, selectMessage} from "@/components/api/news/news";

  export default {
    name: "chatMessage",
    data() {
      return {
        driverId:null,
        websocket:null,
        messageList:[],
        driver:{},
        passenger:{
          fareImg:null,
        },
        chatMessage:{
          fromUserId:null,
          toUserId:null,
          message:null,
          time:null,
          fromUserPicture:null,
          toUserPicture:null,
        },
        userPassenger:{
          id:1,
        },
        userId:null,
        message:"",
        sendWsIntervalId:null,
      };
    },
    mounted() {
      let self=this;
      let socketUrl="http://sj3m7w.natappfree.cc/websocket/message/"+this.chatMessage.toUserId;
      this.websocket = new WebSocket(socketUrl);
      this.websocket.onopen=function (e){
        console.log(e)
        console.log("连接成功");
      }
      this.websocket.onclose=function (e){
        console.log(e);
        console.log("连接关闭");
      }
      this.websocket.onmessage=function (e){
        console.log(e.data);
        self.messageList.push(JSON.parse(e.data));
      }
    },
    created() {
      this.start();
      this.selectMessage();
      this.findDriver();
      this.findPassenger();
    },
    methods : {
      goBack() {
        this.$router.push({path:'/newIndex',query:{name:"b"}})
      },
      sendMessage(){
        this.chatMessage.toUserPicture=this.passenger.fareImg;
        this.chatMessage.fromUserPicture=this.driver.driverImgurl;
        this.chatMessage.message=this.message;
        this.chatMessage.toUserId='passenger,'+this.userId;
        this.chatMessage.fromUserId='driver,'+this.driverId;
        if (this.message!==""&&this.message!==null){
          this.websocket.send(JSON.stringify(this.chatMessage));
        }else {
          alert("消息不能为空")
        }
        this.message="";
      },
      //查询司机的信息
      findDriver(){
        let id=localStorage.getItem("login");
        console.log("11111111111"+id)
        findSelectDriver(id).then(res=>{
          this.driver=res.data;
          console.log(this.driver)
        })
      },
      //查询乘客的信息
      findPassenger(){
        let id=this.$route.query.userId;
        findPassenger(id).then(res=>{
          this.passenger=res.data;
        })
      },
      //查询聊天记录
      selectMessage(){
          selectMessage(this.chatMessage).then(res=>{
          this.messageList=res.data;
        })
      },
      start(){
        this.userId=localStorage.getItem("login");
        this.driverId=this.$route.query.userId;
        console.log(this.userId)
        this.chatMessage.fromUserId='driver,'+this.userId;
        console.log(this.chatMessage.fromUserId)
        this.chatMessage.toUserId='passenger,'+this.driverId;
      }
    },
  };
</script>

<style>
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
